// src/assets/scss/main.scss

// Import variables first
@import 'variables';

// Global base styles
html {
  box-sizing: border-box;
  font-size: 100%; // Typically 16px, adjust if needed
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-base;
  color: $text-color-primary;
  background-color: $bg-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; // Consistent with current App.vue style
}

#app {
  height: 100vh;
  // display: flex and flex-direction: column will be handled by MainLayout.vue
}

// Global link styles (optional, can be more specific)
a {
  color: $accent-color;
  text-decoration: none;
  transition: color $transition-duration-short $transition-timing-function;

  &:hover {
    color: $accent-color-hover;
    text-decoration: underline;
  }
}

// Headings
h1, h2, h3, h4, h5, h6 {
  margin-top: $spacing-lg;
  margin-bottom: $spacing-md;
  font-weight: $font-weight-semibold;
  line-height: 1.3; // Tighter line height for headings
  color: $text-color-primary; // Or a slightly lighter variant for headings
}

h1 { font-size: $font-size-display; }
h2 { font-size: $font-size-xl * 1.25; } // ~22.5px
h3 { font-size: $font-size-xl; }
h4 { font-size: $font-size-lg; }
h5 { font-size: $font-size-base; }
h6 { font-size: $font-size-sm; }


// Custom Scrollbar using new variables
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: $color-gray-100;
  border-radius: $border-radius-sm;
}

::-webkit-scrollbar-thumb {
  background: $color-gray-400;
  border-radius: $border-radius-sm;
  transition: background $transition-duration-short ease-in-out;

  &:hover {
    background: darken($color-gray-400, 10%);
  }
}

// Optional: Selection color
::selection {
  background-color: $accent-color;
  color: $accent-text-color;
} 